/*
 * 评测试题
 */

import * as React from 'react';
import { connect } from 'react-redux';
import ReactCustomScrollBars from 'react-custom-scrollbars';
import { Icon, Row, Col, Menu, Spin, message } from 'antd';

import './Index.scss';

import { isLoading } from 'utils/utils';
import ACTIONS from 'constants/review';

import { fetchTestList } from 'actions/review';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableSearch = LoadableComponent(() => import('./SearchForm'));
const LoadableTestEdit = LoadableComponent(() => import('./Edit'));
const LoadableCustomPagination = LoadableComponent(() =>
  import('components/common/CustomPagination')
);

interface IndexProps {
  dispatch: (action: any) => any;
  loadingGroup: any;
  testTotal: number;
  tests: object[];
}

interface IndexState {
  testId: any;
  current: number;
}

class Index extends React.Component<IndexProps, IndexState> {
  static PAGESIZE = 10;
  static defaultProps: IndexProps = {
    dispatch: () => {},
    loadingGroup: {},
    testTotal: 0,
    tests: [],
  };
  constructor(props: IndexProps) {
    super(props);
    this.state = {
      testId: null,
      current: 1,
    };
  }

  componentDidMount() {
    this.handleFetchTestList();
  }

  // 分页回调
  onPageChange = (page: number) => {
    this.setState({
      current: page,
    });
    this.handleFetchTestList({ page });
  };

  /**
   * 查询Test列表
   */
  handleFetchTestList = (params: any = {}, isSearch: boolean = false, callback: any = () => {}) => {
    const { current: page } = this.state;
    const pageSize = Index.PAGESIZE;

    params = { page, pageSize, ...params };
    if (isSearch) {
      params.page = 1;
    }
    this.props.dispatch(fetchTestList(params)).then(callback);
  };

  // 新增试题回调
  handleEditBasicCallback = (testId: number) => {
    this.handleFetchTestList({}, true, () => {
      this.setState({ testId });
    });
  };

  handleRemoveCallback = () => {
    this.handleFetchTestList({}, true, () => {
      this.setState({
        testId: null,
      });
    });
  };

  handleEdit = (testId: any = 0) => {
    this.setState({
      testId,
    });
  };

  render() {
    const { loadingGroup, tests, testTotal } = this.props;
    const { testId, current } = this.state;

    const paginParams = {
      current,
      total: testTotal,
      onChange: this.onPageChange,
      simple: true,
      style: {
        float: 'none',
        textAlign: 'center',
      },
    };

    let menuItems = null;

    if (tests.length) {
      menuItems = (
        <Menu
          mode="inline"
          onSelect={(item: any) => {
            this.handleEdit(item['key']);
          }}
          selectedKeys={[String(testId)]}>
          {tests.map((item: any) => {
            return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
          })}
        </Menu>
      );
    } else {
      menuItems = (
        <p className="loading-placeholder">
          <Icon type="frown-o" />&nbsp;没有找到试题
        </p>
      );
    }

    return (
      <Row id="panel_content_test">
        <Col span={6} style={{ marginLeft: -24, marginTop: -23 }}>
          <ReactCustomScrollBars
            id="list_side"
            className="scroll-bar"
            autoHide={true}
            autoHeight={false}
            autoHideTimeout={600}
            autoHideDuration={400}>
            <LoadableSearch
              showAddButton={true}
              handleCreate={this.handleEdit}
              handleSearch={this.handleFetchTestList}
            />
            <Spin spinning={isLoading(loadingGroup, ACTIONS.FETCH_TEST_LIST)}>
              <div className="panel-content">{menuItems}</div>
            </Spin>
            <LoadableCustomPagination {...paginParams} />
          </ReactCustomScrollBars>
        </Col>
        <Col span={18} style={{ marginLeft: 24 }}>
          {testId !== null && (
            <div id="edit_side">
              <LoadableTestEdit
                testId={testId}
                handleCallback={this.handleEditBasicCallback}
                onRemoveCallback={this.handleRemoveCallback}
              />
            </div>
          )}
        </Col>
      </Row>
    );
  }
}

function mapStateToProps(state: any) {
  let { tests, testTotal } = state.review;
  const { loadingGroup } = state;
  tests = [
    {
      id: 1,
      name: 'test 1',
      templateId: 1,
    },
  ];

  return {
    loadingGroup,
    tests,
    testTotal,
  };
}

export default connect(mapStateToProps)(Index);
